<template>
  <div class="app-container ad-container">
    <el-form ref="mntForm" :model="formModel" label-width="0">
      <el-form-item label="" prop="list">
        <div class="items ad-items">
          <div v-for="(item, index) in formModel.list" :key="index" class="item">
            <hey-image-viewer class="dib" :item="item" url-field="adUrl" name-field="adName" @handleSuccess="handleSuccess" @remove="remove" />
          </div>
        </div>
        <div class="items av-items">
          <div v-for="(item, index) in formModel.list" :key="index" class="item">
            <hey-av src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" />
          </div>
        </div>
      </el-form-item>
      <p class="tip">
        请上传尺寸 1024*800、5m以内大小的jpg/png图片
      </p>
      <!--<div class="text-center">
        <el-button type="primary" @click="handleSubmit()">保存</el-button>
      </div>-->
    </el-form>
  </div>
</template>

<script>
import coverImg from '@/assets/images/icons-pistures@2x.png'
export default {
  name: 'List',
  components: {
  },
  props: {},
  data() {
    return {
      adObj: {
        id: '',
        adName: '',
        adUrl: coverImg,
        adType: '1'
      },
      formModel: {
        list: []
      },
      rules: {
        list: [{ required: true, validator: (rule, value, callback) => {
          if (value.find(item => item.adUrl !== coverImg)) {
            return callback()
          }
          return callback('请')
        }, trigger: ['change', 'blur'] }]
      }
    }
  },
  computed: {},
  mounted() {
    for (let i = 0; i < 5; i += 1) {
      this.formModel.list.push({ ...this.adObj })
    }
  },
  methods: {
    remove(item) {
      item.adUrl = coverImg
    },
    handleSuccess(res, file) {
      console.log('res', res)
    },
    handleSubmit() {
      this.$refs.mntForm.validate(valid => {
        if (valid) {
          const { pageType, formModel } = this
          const param = { ...formModel }
          const url = pageType === 'add' ? '/authority/addAuthRole' : '/authority/updateAuthRole'
          const tip = pageType === 'add' ? '新增成功！' : '修改成功！'
          this.post(url, param).then(res => {
            this.$info(tip, () => {
              this.$emit('mntSuc', res)
              this.closeDialog()
            })
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .tip {
    text-align: center;
    color: red;
  }
.items {
  margin-top: 20px;
  margin-bottom: 30px;
  display: flex;
  justify-content: center;

  .item {
    &:not(:last-child) {
      margin-right: 20px;
    }
  }
}

  .av-items {
    .item {
    }
  }
</style>
<style lang="scss">
  .ad-container {
    .items {
      .dubu-uploader {
        /*height: 220px;
        width: 220px;*/
      }
    }
  }
</style>
